import React, { Component, createRef, forwardRef } from 'react'

class Header extends Component {

    state = {
        msg: '这个是头部'
    }

    render() {
        return (
            <div>
                {this.state.msg}
            </div>
        );
    }
}

function Content() {
    return (
        <div>Content</div>
    )
}








export default class App extends Component {

    //创建一个ref
    sectionRef = createRef()
    headerRef = createRef()
    contentRef = createRef()

    render() {
        return (
            <div>
                {/* 将 ref 添加在元素上，可以获取到对应的元素 */}
                <section ref={this.sectionRef}>section</section>

                {/* 将 ref 添加在类组件上面时候我们可以获取到组件的实例 */}
                <Header ref={this.headerRef}></Header>

                {/* 对于函数式组件而言,使用ref需要用 forwardRef 的函数包裹 */}
                <Content ref={this.contentRef}></Content>


                <button onClick={() => {
                    // 获取到的是section这个标签
                    console.log(this.sectionRef.current);

                    // 获取到的是 Header 组件实例
                    console.log(this.headerRef.current);
                    //并且可以操作该类组件
                    this.headerRef.current.setState({
                        msg: '这个真的是头部吗?'
                    })


                    console.log(this.contentRef.current);

                }}>获取ref的值</button>
            </div>
        )
    }
}
